
<!-- shooting_game/frontend/works.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>作品集 - 校园创意工作室</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.loli.net/css?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animation.css">
  <style>
    .binder-clip {
      width: 50px;
      height: 100px;
      background-image: url('https://picsum.photos/100/200?grayscale');
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
    .paper-sheet {
      background-color: #fff9e6;
      border-left: 1px solid #e0d8c0;
      border-right: 1px solid #e0d8c0;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      position: relative;
      padding: 2rem;
      margin-bottom: 2rem;
    }
    .paper-sheet::before {
      content: '';
      position: absolute;
      top: 0;
      left: 40px;
      width: 2px;
      height: 100%;
      background: repeating-linear-gradient(to bottom, #e0d8c0, #e0d8c0 1px, transparent 1px, transparent 24px);
    }
    .work-tag {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 50px;
      font-size: 0.8rem;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <!-- 粒子背景 -->
  <div id="particles-js" class="fixed inset-0 z-0"></div>

  <!-- 导航栏 -->
  <nav class="relative z-10 bg-white bg-opacity-90 shadow-md">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="text-2xl font-bold text-pink-500">🎨 校园创意社</div>
        <div class="hidden md:flex space-x-8">
          <a href="index.html" class="nav-item transition duration-300 text-blue-600 font-medium">🏠 首页</a>
          <a href="#" class="nav-item transition duration-300 text-green-600 font-medium">📚 作品集</a>
          <a href="about.html" class="nav-item transition duration-300 text-purple-600 font-medium">👨‍🎓 关于我</a>
          <a href="contact.html" class="nav-item transition duration-300 text-yellow-600 font-medium">📮 联系我</a>
        </div>
        <button class="md:hidden focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="relative z-10 pt-10 pb-20">
    <div class="container mx-auto px-4">
      <!-- 活页夹标题 -->
      <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-bold text-pink-600 mb-4">我的创意作品集</h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">记录校园生活中的每一个创意瞬间 ✏️</p>
      </div>

      <!-- 活页夹内容 -->
      <div class="max-w-4xl mx-auto">
        <!-- 活页夹夹子 -->
        <div class="binder-clip"></div>
        
        <!-- 作品集纸张1 -->
        <div class="paper-sheet animate-on-scroll card-enter">
          <div class="flex flex-col md:flex-row items-start">
            <div class="md:w-1/3 mb-6 md:mb-0">
              <div class="h-48 bg-gradient-to-r from-blue-100 to-blue-200 rounded-lg flex items-center justify-center">
                <span class="text-6xl">🎨</span>
              </div>
            </div>
            <div class="md:w-2/3 md:pl-8">
              <h2 class="text-2xl font-bold text-blue-600 mb-3">校园插画集</h2>
              <div class="mb-4">
                <span class="work-tag bg-blue-100 text-blue-800">插画</span>
                <span class="work-tag bg-green-100 text-green-800">校园</span>
                <span class="work-tag bg-yellow-100 text-yellow-800">手绘</span>
              </div>
              <p class="text-gray-700 mb-4 leading-relaxed">
                这个系列记录了我在校园生活中的点点滴滴，从图书馆的安静角落到操场的活力四射，用画笔捕捉了校园四季的变化和同学们的生活瞬间。
              </p>
              <p class="text-gray-500 text-sm">创作时间: 2024年3月</p>
            </div>
          </div>
        </div>

        <!-- 作品集纸张2 -->
        <div class="paper-sheet animate-on-scroll card-enter" style="animation-delay: 0.2s;">
          <div class="flex flex-col md:flex-row items-start">
            <div class="md:w-1/3 mb-6 md:mb-0">
              <div class="h-48 bg-gradient-to-r from-purple-100 to-purple-200 rounded-lg flex items-center justify-center">
                <span class="text-6xl">📱</span>
              </div>
            </div>
            <div class="md:w-2/3 md:pl-8">
              <h2 class="text-2xl font-bold text-purple-600 mb-3">校园APP设计</h2>
              <div class="mb-4">
                <span class="work-tag bg-purple-100 text-purple-800">UI设计</span>
                <span class="work-tag bg-red-100 text-red-800">交互</span>
                <span class="work-tag bg-indigo-100 text-indigo-800">移动端</span>
              </div>
              <p class="text-gray-700 mb-4 leading-relaxed">
                为校园生活量身定制的移动应用设计，包含课程表、校园地图、活动通知等功能模块。采用明亮的色彩和简洁的交互，让校园生活更加便捷有趣。
              </p>
              <p class="text-gray-500 text-sm">创作时间: 2024年5月</p>
            </div>
          </div>
        </div>

        <!-- 作品集纸张3 -->
        <div class="paper-sheet animate-on-scroll card-enter" style="animation-delay: 0.4s;">
          <div class="flex flex-col md:flex-row items-start">
            <div class="md:w-1/3 mb-6 md:mb-0">
              <div class="h-48 bg-gradient-to-r from-green-100 to-green-200 rounded-lg flex items-center justify-center">
                <span class="text-6xl">🎥</span>
              </div>
            </div>
            <div class="md:w-2/3 md:pl-8">
              <h2 class="text-2xl font-bold text-green-600 mb-3">校园微电影</h2>
              <div class="mb-4">
                <span class="work-tag bg-green-100 text-green-800">视频</span>
                <span class="work-tag bg-pink-100 text-pink-800">青春</span>
                <span class="work-tag bg-orange-100 text-orange-800">故事</span>
              </div>
              <p class="text-gray-700 mb-4 leading-relaxed">
                这部15分钟的微电影讲述了一群大学生在校园中的成长故事，从入学时的迷茫到毕业时的坚定。我负责了剧本创作、拍摄和后期剪辑的全过程。
              </p>
              <p class="text-gray-500 text-sm">创作时间: 2024年1月</p>
            </div>
          </div>
        </div>

        <!-- 作品集纸张4 -->
        <div class="paper-sheet animate-on-scroll card-enter" style="animation-delay: 0.6s;">
          <div class="flex flex-col md:flex-row items-start">
            <div class="md:w-1/3 mb-6 md:mb-0">
              <div class="h-48 bg-gradient-to-r from-yellow-100 to-yellow-200 rounded-lg flex items-center justify-center">
                <span class="text-6xl">🎵</span>
              </div>
            </div>
            <div class="md:w-2/3 md:pl-8">
              <h2 class="text-2xl font-bold text-yellow-600 mb-3">校园音乐节海报</h2>
              <div class="mb-4">
                <span class="work-tag bg-yellow-100 text-yellow-800">平面设计</span>
                <span class="work-tag bg-teal-100 text-teal-800">音乐</span>
                <span class="work-tag bg-amber-100 text-amber-800">活动</span>
              </div>
              <p class="text-gray-700 mb-4 leading-relaxed">
                为年度校园音乐节设计的系列海报，融合了音乐元素和校园标志性建筑，采用鲜艳的色彩和动感的排版，完美传达了音乐节的活力与热情。
              </p>
              <p class="text-gray-500 text-sm">创作时间: 2023年12月</p>
            </div>
          </div>
        </div>

        <!-- 更多作品提示 -->
        <div class="text-center mt-12">
          <div class="inline-block px-6 py-3 bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full font-bold hover:shadow-lg transition duration-300">
            🎨 更多作品正在创作中...
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="relative z-10 bg-gray-800 text-white py-10">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="text-2xl font-bold text-pink-400">校园创意社</div>
          <p class="mt-2 text-gray-400">用创意点亮校园生活</p>
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📱 微信</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🐦 微博</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📧 邮箱</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🎵 B站</a>
        </div>
      </div>
      <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400">
        <p>© 2025 校园创意工作室 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 脚本 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="js/main.js"></script>
  <script>
    // 粒子效果初始化
    particlesJS('particles-js', {
      particles: {
        number: { value: 60, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: true },
        size: { value: 3, random: true },
        line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
        move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
      }
    });

    // 移动端菜单切换
    document.querySelector('button.md-hidden').addEventListener('click', function() {
      const nav = document.querySelector('.hidden.md\\:flex');
      nav.classList.toggle('hidden');
      nav.classList.toggle('flex');
      nav.classList.toggle('flex-col');
      nav.classList.toggle('absolute');
      nav.classList.toggle('top-16');
      nav.classList.toggle('left-0');
      nav.classList.toggle('right-0');
      nav.classList.toggle('bg-white');
      nav.classList.toggle('p-4');
      nav.classList.toggle('space-y-4');
      nav.classList.toggle('space-x-8');
      nav.classList.toggle('shadow-md');
    });
  </script>
</body>
</html>
